<template>
  <div class="navigation-container">
    <canvas ref="canvas" class="canvas-background"></canvas>

    <div class="footer">蜀ICP备2025160758号</div>
    
    <!-- 第0页 -->
    <div class="page page-0" :class="{ 'page-hidden': currentPage !== 0 }">
      <div class="main-content">
        <!-- 第0页内容 - 暂时为空 -->
        <div class="page-0-placeholder">
        </div>
      </div>
      <div class="scroll-indicator">
        <div class="scroll-arrow"/>
      </div>
    </div>
    
    <div class="page page-1" :class="{ 'page-hidden': currentPage !== 1 }">
      <div class="main-content">
        <div class="card">
          <card/>
        </div>
        <div class="slogan">
          <typewriter/>
        </div>
      </div>
        <div class="scroll-indicator">
          <div class="scroll-arrow"/>
        </div>
    </div>
    
    <div class="page page-2" :class="{ 'page-hidden': currentPage !== 2 }">
        <div class="nav-grid">
          <div 
            v-for="(item, index) in navItems" 
            :key="index"
            class="nav-card"
            @click="navigateTo(item.pageKey)"
          >
            <img :src="item.img" alt="">
            <span class="nav-title">{{ item.title }}</span>
          </div>
      </div>
    </div>
    
    <!-- 页面指示器 -->
    <div class="page-indicator">
      <div 
        v-for="page in 3" 
        :key="page"
        class="indicator-dot"
        :class="{ active: currentPage === page - 1 }"
        @click="scrollToPage(page - 1)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNavigationView } from '@/scripts/components/NavigationView'
import typewriter from '@/components/typewriter.vue'
import card from '@/components/card.vue'
const {
  canvas,
  currentPage,
  navItems,
  scrollToPage,
  navigateTo
} = useNavigationView()
</script>

<style scoped>
@import '@/styles/components/NavigationView.css';
@import '@/styles/components/CodeRain.css';
</style>